<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            width: 380px;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
            font-size: 12px;
            line-height: 25px;
            border: 1px #000 solid;

        }
        ul,li{
            padding: 0px;
            margin: 0px;
            list-style-type: none;
        }
        /*父级元素相对定位*/
        #content ul{
            position: relative;
        }
        .tipText,.tipBg{
            position: absolute;
            width: 380px;
            height: 25px;
            top: 320px;
        }
        .tipText{
            color: white;
            /*z-index: 0;*/
        }
        .tipBg{
            background: black;
            opacity: 0.5;   /*背景透明度*/
        }
    </style>
</head>
<body>

<ul id="content">
    <li><img src="images/ts1.png" alt=""></li>
    <li class="tipText">学习微服务，找狂神</li>
    <li class="tipBg"></li>
    <li>时间：2099-01-01</li>
    <li>地点：月球一号基地</li>
</ul>
</body>
</html>